<!-- 顶部统计 -->

<template>
  <div class="Survey-TopCount">
    <EasyCard v-for="item in dataList" :key="item.title" noPadding full quar>
      <div class="Survey-TopCount-panel" :style="item.style">
        <label>{{ item.title }}</label>
        <p>{{ CORE.numStr(item.num) }}</p>
        <div>{{ item.isUp === 1 ? '+' : '-' }}{{ item.precent }}%<span>同上月对比</span></div>
      </div>
    </EasyCard>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

const getBgImg = (name) => {
  const url = CORE.common(`/maintain/overview/${name}.png`)
  return `url(${url})`
}

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'TopCount',

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('./', true, /vue$/)),

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 数据列表
     */
    dataList() {
      return [
        {
          title: '设备数',
          num: 165526,
          isUp: 1,
          precent: 0.3,
          style: { backgroundImage: getBgImg('device') },
        },
        {
          title: '工单数',
          num: 105983,
          isUp: 1,
          precent: 1.2,
          style: { backgroundImage: getBgImg('repair') },
        },
        {
          title: `${CORE.MAP.ALARM}数`,
          num: 65782,
          isUp: 1,
          precent: 33.5,
          style: { backgroundImage: getBgImg('alarm') },
        },
        {
          title: '合同数',
          num: 5689,
          isUp: 2,
          precent: 7.3,
          style: { backgroundImage: getBgImg('other') },
        },
      ]
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
